<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆角边框</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div:nth-of-type(1) {
            width: 200px;
            height: 100px;
            background-color: #f00;
            margin: 100px auto;
            /* 
                border-radius 设置圆角边框
                1、一个值 四个角的值都一样 如果设置为 50% 将得到一个圆形
                2、设置两个值 第一个表示 左上和右下 第二个值表示 左下和右上
                3、设置三个值 第一个表示 左上 第二个表示 右上和左下 第三个控制右下
                4、设置四个值 分别表示 左上 右上 右下 左下
                5、100px/50px 添加 / 是用来设置不同方向的半径值 水平x方向/垂直y方向

                border-radius 是和复合属性
                    border-left-top-radius 左上
                    border-right-top-radius 右上
                    border-right-bottom-radius 右下
                    border-left-bottom-ratius 左下
            */
            border-radius: 10px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>